<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function clickAll() {
            // 让所有复选框都选中
            // document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组 一样
            // 集合中每个元素都是dom对象
            // 这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var elementsByName = document.getElementsByName("hobby");
            for (var i = 0;i<elementsByName.length;i++){
                elementsByName[i].checked = true;
            }
        }
        //全不选
        function noClickAll() {
            var elementsByName = document.getElementsByName("hobby");
            for (var i = 0; i<elementsByName.length;i++){
                elementsByName[i].checked = false;
            }
        }
        // 反选
        function reverseClick() {
            var values = document.getElementsByName("hobby");
            for (var i = 0;i < values.length;i++){
                values[i].checked = !values[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好:<input type="checkbox" name="hobby" value="java" checked="checked">Java
        <input type="checkbox" name="hobby" value="c++">C+++
        <input type="checkbox" name="hobby" value="php">php
        <br/>
        <button onclick="clickAll()">全选</button>
        <button onclick="reverseClick()">反选</button>
        <button onclick="noClickAll()">全不选</button>
</body>
</html>